/**
 * Created by Administrator on 2019/3/7
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {ActivityIndicator, Dimensions, FlatList, Image, ScrollView, StyleSheet, Text, View, ToastAndroid, TouchableWithoutFeedback, Slider, Switch} from 'react-native';


let REQUEST_URL =
    "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";


export default class MoviesList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loaded: false,
            isOn:false,
        };
        this.fetchData = this.fetchData.bind(this);
    }

    _onPress = (item)=>{
        alert(item.title)
    };

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch(REQUEST_URL)
            .then(response => response.json())
            .then(responseData => {
                // 注意，这里使用了this关键字，为了保证this在调用时仍然指向当前组件，我们需要对其进行“绑定”操作
                this.setState({
                    data: this.state.data.concat(responseData.movies),
                    loaded: true,
                });
            });
    }

    showToast(msg){
        ToastAndroid.show(msg, ToastAndroid.SHORT);

        // ToastAndroid.showWithGravity(
        //     "All Your Base Are Belong To Us",
        //     ToastAndroid.SHORT,
        //     ToastAndroid.CENTER
        // );

        // ToastAndroid.showWithGravityAndOffset(
        //     "A wild toast appeared!",
        //     ToastAndroid.LONG,
        //     ToastAndroid.BOTTOM,
        //     25,
        //     50
        // );
    }

    render() {

        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return (
            <View>
                <ScrollView
                    //  禁用竖直滚动条
                    showsVerticalScrollIndicator={false}>
                    <Switch
                        disabled={false}
                        onValueChange={(value) => {
                            this.setState({isOn: value});
                            if(value){
                                this.showToast('这是一条信息')
                            }
                        }}
                        value={this.state.isOn}/>

                    <Slider
                        value={5}
                        maximumValue={10}
                        minimumValue={1}
                        onSlidingComplete={(num)=>{
                            console.log(num)
                        }}/>

                    <FlatList
                        data={this.state.data}
                        renderItem={this.renderMovie.bind(this)}
                        style={styles.list}
                        keyExtractor={item => item.id}/>

                </ScrollView>

            </View>

        );
    }

    renderLoadingView() {
        return (
            <View style={styles.wrapper}>
                <View style={styles.box}>
                    <ActivityIndicator
                        animating={true}
                        color={'white'}
                        size='large'
                    />
                    <Text style={styles.txt}>数据加载中...</Text>
                </View>
            </View>
        );
    }


    renderMovie({item}) {
        // item也是FlatList中固定的参数名，请阅读FlatList的相关文档
        return (
            <TouchableWithoutFeedback onPress={()=> this._onPress(item)}>
                <View style={styles.container}>
                    <Image
                        source={{uri: item.posters.thumbnail}}
                        style={styles.thumbnail}
                    />
                    <View style={styles.rightContainer}>
                        <Text style={styles.title} numberOfLines={1}>{item.title}</Text>
                        <Text style={styles.year} numberOfLines={1}>{item.year}</Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>

        );
    }


}

// 构建样式
const styles = StyleSheet.create({
    /*
    * *******    style属性    *******
    * flexDirection        水平：row   竖直：column
    * justifyContent       flex-start、center、flex-end、space-around、space-between以及space-evenly
    * alignItems           flex-start、center、flex-end、stretch。
    * */
    loading: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: Dimensions.get('window').height, //窗口高度
    },
    container: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#FFFDDD",
        marginHorizontal: 5,
        marginVertical: 2,
        borderWidth: 1,
        borderColor: 'grey',
    },
    rightContainer: {
        flex: 1
    },
    title: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    },
    year: {
        textAlign: "center"
    },
    thumbnail: {
        width: 53,
        height: 81
    },
    list: {
        backgroundColor: "#F5FCFF"
    },

    wrapper: {
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
        zIndex: 10,
    },
    box: {
        paddingVertical: 12,
        paddingHorizontal: 20,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.6)',
        borderRadius: 6
    },
    txt: {
        marginLeft: 20,
        fontSize: 14,
        color: 'white'
    },


});
